<!-- 个人信息 -->
<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 个人中心</el-breadcrumb-item>
        <el-breadcrumb-item>个人信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="form-box">
        <el-form ref="userFormRef" :rules="rules" :model="userForm" v-loading="loading" label-width="100px">
          <el-form-item label="角色：" prop="role_name">
            <el-input v-model="userForm.role_name" disabled placeholder="角色"></el-input>
          </el-form-item>
          <el-form-item label="组织：" prop="agency_name">
            <el-input v-model="userForm.agency_name" disabled placeholder="组织"></el-input>
          </el-form-item>
          <el-form-item label="用户名：" prop="user_name">
            <el-input v-model="userForm.user_name" disabled placeholder="用户名"></el-input>
          </el-form-item>
          <el-form-item label="昵称：" prop="nick_name">
            <el-input v-model="userForm.nick_name" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <el-form-item label="手机号：" prop="mobile">
            <el-input v-model="userForm.mobile" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="头像：" prop="image">
            <div class="w-spec">
              <el-upload class="avatar-uploader" v-if="!userForm.avatar" :action="uploadUrl" :data="uploadData"
                :show-file-list="false"
                :on-success="(response) => handleResourcesUploadSuccess(response, userForm, 'avatar')"
                :before-upload="(file) => handleBeforeUpload(file, 500)">
                <el-icon class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>
              <div class="wzg-continer-img" v-else>
                <img :src="userForm.avatar === '' ? '' : imageUrl + userForm.avatar" alt="头像" class="wzg-img">
                <el-icon class="el-icon-close" @click="handleDeleteResources(userForm, 'avatar')">
                  <Close />
                </el-icon>
              </div>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm(userFormRef, userForm, 'PUT')" v-permission="'edit'">保存
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { useUserStore } from '@/store/user';
import { api as Request, imageUrl, uploadUrl } from '@/utils/api';
import useRules from '@/hooks/useRules.js';
import { useUpload } from '@/hooks/useUpload.js';

const loading = ref(false);
const userFormRef = ref('');
const userForm = reactive({
  agency_name: '',
  role_name: '',
  user_name: '',
  nick_name: '',
  mobile: '',
  avatar: ''
});
const rules = useRules('personalInfoRules');/* 校验规则 */

let { uploadData,
  handleDeleteResources, handleResourcesUploadSuccess, handleBeforeUpload } = useUpload('', loading);

const userStore = useUserStore();/* 用户信息 */

/* 获取用户信息 */
const handleGetUserInfoInfo = (data) => {
  userStore.getUserInfoInfo(data).then((res) => {
    userForm.agency_name = res.result.agency_name;
    userForm.role_name = res.result.role_name;
    userForm.user_name = res.result.user_name;
    userForm.nick_name = res.result.nick_name;
    userForm.mobile = res.result.mobile;
    userForm.avatar = res.result.avatar;
  }).catch((res) => {
    console.log(res);
  });
}

/* 保存或编辑 */
const submitForm = (formEl, formData, type) => {
  formEl.validate((valid) => {
    if (!valid) {
      ElMessage.warning('请正确填写所有必填信息');
      return false;
    }
    submitFormInfo(formData, type);
  })
}
/* 保存或编辑信息 */
const submitFormInfo = (formData, type) => {
  loading.value = true;
  Request.updateMyInfo(formData, type)
    .then(res => {
      ElMessage.success(res.msg);
      userStore.setUserInfo(userForm);
    }).catch(err => {
      console.log(err);
    }).finally(() => {
      loading.value = false;
    });
}

/* 获取用户信息 */
handleGetUserInfoInfo();

</script>

<style lang="scss">
/* 修改Switch开关 */
.el-switch {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>

<style lang="scss" scoped>
/* 图片上传 start */
.w-spec .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.w-spec :deep(.el-upload--text) {
  width: inherit;
}

.w-spec .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.w-spec .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
}

.w-spec .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.w-spec .avatar-uploader :deep(.el-upload--text) {
  height: inherit;
  padding: 2px 2px;
  color: #409eff;
}

.w-spec .wzg-continer-img {
  position: relative;
  display: inline-block;
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;

  .wzg-img {
    width: inherit;
    height: inherit;
  }

  .el-icon-close {
    display: none;
  }
}

/* 图片删除按钮 start*/
.wzg-continer-img:hover .el-icon-close {
  position: absolute;
  top: 1px;
  right: -1px;
  z-index: 1000;
  display: inline-block;
  width: 24px;
  height: 24px;
  padding: 5px;
  cursor: pointer;
  background-color: rgba($color: #f00, $alpha: 0.8);
  color: #fff;
  border-radius: 2px;
  transition: 0.5s;
}

.w-spec .el-icon-close:hover {
  opacity: 0.8;
}
</style>